import React from 'react';
import { Layout, Menu, Icon } from 'antd';
import 'antd/dist/antd.css';

const { Header } = Layout;

// 下拉页设置
const menu = (
  <Menu>
    <Menu.Item>亮色</Menu.Item>
    <Menu.Item>暗色</Menu.Item>
  </Menu>
);

const styleSheet = {
  title: {
    color: '#fff',
    float: 'left',
    margin: '0'
  }
};

function Navbar() {
  return (
    <div>
      <Header style={{ position: 'fixed', zIndex: '2', width: '100%' }}>
        <a href="http://sakumyz.xyz/graduation-project">
          <h1 style={styleSheet.title}>IOT梦工厂智慧教室云平台</h1>
        </a>

        <Menu
          theme="dark "
          mode="horizontal"
          defaultSelectedKeys={['1']}
          style={{ lineHeight: '64px', float: 'right' }}
        >
          <Menu.Item key="1">
            <a href="http://sakumyz.xyz/graduation-project">
              <Icon type="home" />
              首页
            </a>
          </Menu.Item>
          <Menu.Item key="2">
            <Icon type="logout" />
            注销
          </Menu.Item>
          <Menu.Item key="3">
            <Icon type="bars" />
            主题
          </Menu.Item>
        </Menu>
      </Header>
    </div>
  );
}

export default Navbar;
